<template>
	<div class="container">
		 <headNav title="邮件详情"></headNav>
		<div class="dz-xq">
			<h2><label v-if="email.MailTypeCode == '1'">[重要] </label>{{email.Theme}}</h2>
			<div class="xq-list">
				<span>发件人：</span><span>{{email.FromUserName}}</span>
			</div>
			<div class="xq-list">
				<span>收件人：</span><span @click="toggle('main')" class="e-1" :class="{'e-2':isOpenMain}">{{email.ToEmailName}}</span>
			</div>
			<div class="xq-list">
				<span>抄送人：</span><span @click="toggle('copy')" class="e-1" :class="{'e-2':isOpenCopy}">{{email.CopyEmailName}}</span>
			</div>
			<div class="xq-list">
				<span>{{email.SendingTime | formatDateTime('yyyy-MM-dd HH:mm:ss')}}</span>
			</div>
			<div v-html="email.Content" class="xq-list email-content">
				
			</div>
			<!-- <p v-html="email.Content"></p> -->
		</div>
		<div class="fj-p">
			<div class="tip" v-show="fileList.length > 0 || fileList1.length > 0">（移动端不支持下载，如需下载请到电脑端操作）</div>
			<div class="fj-label">附件</div>
			<div class="fj-val">
				
				<a v-for="(item,index) in fileList" :key="index" :download="item.name" :href="item.url | imgUrl" target="_blank"  class="fj-item">
					<img  class="fj-img" :src="item.url | imgUrl">
				</a>
				
				<a v-for="(item,index) in fileList1" :key="index" :download="item.name" :href="item.url | imgUrl" target="_blank" class="fj-item-1">
					{{item.name}}
				</a>
			</div>
		</div>
		<div v-show="email.Status == 0" class="operate-p">
			<x-button @click.native="reply" type="primary">回复</x-button>
			<x-button @click.native="transmit" type="primary">转发</x-button>
			<x-button @click.native="del" type="warn">删除</x-button>
		</div>
		<div v-show="email.Status == 1" class="operate-p">
			<x-button @click.native="edit" type="primary">再次编辑</x-button>
		</div>
		<div v-show="email.Status == 2" class="operate-p">
			<x-button @click.native="del" type="warn">删除</x-button>
		</div>
	</div>
</template>
<script>
import { XButton } from 'vux'
import {getFujian, read, getEmailDetail, delEmail, delReceiveEmail} from '@/api/emailApi'
import {mapGetters} from 'vuex'
import headNav from '@/components/headNav/headNav';
export default {
	name: 'emailDetail',
	components: {
		XButton, headNav
	},
	data () {
		return {
			isOpenMain: false,
			isOpenCopy: false,
			email: {},
			fileList: [],
			fileList1: []
		}
	},
	computed: {
		...mapGetters(['cookiesObj'])
	},
	methods: {
		toggle (type) {
			if (type == 'main') {
				this.isOpenMain = !this.isOpenMain
			} else if (type == 'copy') {
				this.isOpenCopy = !this.isOpenCopy
			}
		},
		getDetail () {
			// this.$vux.loading.show({
			// 	text: '加载中'
			// })
			getEmailDetail({
				mailId: this.email.Id
			}).then(res => {
				// this.$vux.loading.hide()
				
				res = JSON.parse(res)
				var detail = JSON.parse(res.Msg)
				
				// var Status = this.email.Status
				// detail.Status = parseInt(Status + '')
			
				this.email = Object.assign(detail, this.email)
				this.email.Content = decodeURI(this.email.Content)
				this.email.Status = parseInt(this.email.Status)
				console.log(this.email)

				this.getFujian()
				this.readEmail()
			})
		},
		getFujian () {
			getFujian({
				mailId: this.email.Id
			}).then(res => {
				res = JSON.parse(res)
				if (res.Code == 200) {
					var list = JSON.parse(res.Msg)
					if (list.length > 0) {
						var name = list[0].FileName.split(',')
						var url = list[0].Url.split(',')
						this.fileList = []
						this.fileList1 = []
						for (var i = 0; i < name.length; i++) {
							var suffix = name[i].substring(name[i].lastIndexOf('.')).toUpperCase()
							if (suffix == '.PNG' || suffix == '.JPG' || suffix == '.JPEG') {
								this.fileList.push({name: name[i], url: url[i], suffix: suffix})
							} else {
								this.fileList1.push({name: name[i], url: url[i], suffix: suffix})
							}
						}
						// this.fileList1.push({name: 'fasfas.ppt', url: 'fasfsafs', suffix: '.ppt'})
						// this.fileList1.push({name: 'fasfas.ppt', url: 'fasfsafs', suffix: '.ppt'})
					} else {
						this.fileList = []
					}
				} else {

				}
			})
		},
		readEmail () {
			if (this.email.Status == 0) {
				read({
					ids: this.email.mailreceivingobjId,
					ToUserId: this.cookiesObj.loginUserId,
					readStatus: true
				}).then(res => {
					
				})
			}		
		},
		reply () {
			this.$store.state.email.emailData = {
				email: this.email,
				fileList: this.fileList,
				type: 'reply'
			}
			this.$router.replace('write')
		},
		transmit () {
			this.$store.state.email.emailData = {
				email: this.email,
				fileList: this.fileList,
				type: 'transmit'
			}
			this.$router.replace('write')
		},
		edit () {
			this.$store.state.email.emailData = {
				email: this.email,
				fileList: this.fileList,
				type: 'edit'
			}
			this.$router.replace('write')
		},
		del () {
			var self = this
			this.$vux.confirm.show({
				content: '确定删除吗？',
				onCancel () {
				
				},
				onConfirm () {
					if (self.email.Status == 0) {
						delReceiveEmail({
							DelEmailreceiving: self.email.mailreceivingobjId
						}).then(res => {
							res = JSON.parse(res)
							if (res.Code == 200) {
								self.$store.state.email.addType = 'delete'
								self.$store.state.email.deleteId = self.email.Id
							}
							self.$vux.toast.text(res.Msg, 'top')
							self.$router.replace('list')
						})
					} else {
						delEmail({
							ids: self.email.Id
						}).then(res => {
							res = JSON.parse(res)
							if (res.Code == 200) {
								self.$store.state.email.addType = 'delete'
								self.$store.state.email.deleteId = self.email.Id
							}
							self.$vux.toast.text(res.Msg, 'top')
							self.$router.replace('list')
						})
					}
				}
			})
		}
	},
	mounted () {
		this.setTitle('邮箱')

		this.email = this.$store.state.email.curEmail
	
		this.getDetail()
	}
}
</script>
<style scoped src="./css/e-mail.css"></style>
<style scoped src="./css/public.css"></style>
<style scoped>
.container{
	background: #fff;
}
.tip{
	color: #E64340;
	
	text-align: right;
}
.fj-p{
	padding: 0.4rem 0.2rem;
	font-size: 0.28rem;
}
.fj-label{
	width: 1rem;
	display: inline-block;
	vertical-align: middle;
}
.fj-val{
	width: 5.5rem;
	display: inline-block;
	vertical-align: middle;
}
.fj-item{
	float: left;
	position: relative;
	margin: 0.2rem 0.2rem 0 0;
	width: 1.5rem;
	height: 1.5rem;
	text-align: center;
	background: #fff;

	font-size: 0;
}
.fj-item-1{
	clear: both;
	padding: 0.2rem 0 0 0;
	display: block;
}
.fj-item::before{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.fj-img{
	max-width: 100%;
	max-height: 100%;
	display: inline-block;
	vertical-align: middle;
}
.email-content{
	white-space: pre-wrap;
}
</style>
